<template>
  <div class="left-col">
    <div class="top-cell">
      <DCard title="数量统计">
        <div class="count-static">
          <div class="item" v-for="(item, index) in countList" :key="index">
            <div class="label">{{ item.label }}</div>
            <div class="value"><CountUpVue :end-val="item.value" /> 个</div>
          </div>
        </div>
      </DCard>
    </div>
    <div class="bottom-cell">
      <DCard title="风场风速">
        <div class="list">
          <div class="item" v-for="(item, index) in list" :key="index">
            <Liquidfill :options="item" />
          </div>
        </div>
      </DCard>
    </div>
  </div>
</template>

<script setup name="LeftCol">
import DCard from '@/components/DCard.vue'
import Liquidfill from '@/components/Charts/Liquidfill.vue'
import CountUpVue from '@/components/CountUpVue/index.vue'
import { randomLenNum } from '@/utils/index.js'
import { getNumZy, getFcData } from '@/api/base.js'

import useAppStore from '@/store/modules/app'
const appStore = useAppStore()

const countList = ref([])

const list = ref([])

const init = () => {
  const time = appStore.timePoint
  // 模拟接口获取数据
  // console.log('模拟接口获取数据', appStore.timePoint)
  getNumZy({ time: time }).then(res => {
    if (res.code == '0000') {
      countList.value = res.data
    }
  })
  getFcData({ time: time }).then(res => {
    if (res.code == '0000') {
      list.value = res.data
    }
  })
  // countList.value = [
  //   {
  //     label: '风电场数量：',
  //     value: randomLenNum(3)
  //   },
  //   {
  //     label: '风机数量：',
  //     value: randomLenNum(3)
  //   },
  //   {
  //     label: '换流站数量：',
  //     value: randomLenNum(3)
  //   }
  // ]
  // list.value = Array.from({ length: 12 }, () => {
  //   return {
  //     title: '风电场1',
  //     percentage: Math.random()
  //   }
  // })
  // console.log(list.value);
}

init()

watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
.left-col {
  width: 100%;
  height: 100%;

  .top-cell {
    width: 100%;
    height: 30%;

    .count-static {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 20px;
    }

    .item {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
    }
  }

  .bottom-cell {
    width: 100%;
    height: 70%;

    .list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;

      .item {
        width: calc(100% / 3);
        height: calc(100% / 4);
      }
    }
  }
}
</style>
